<template>
	<view class="page page-fill">
		<view class="page-block info-list">
			<!-- 头像 start -->
			<view class="item-wapper face-line-upbottom" @click="operate">
				<view class="info-words">头像</view>
				<view class="right-wapper">
					<image :src="user.avatarUrl" class="face"></image>
					<view class="arrow-block">
						<image src="../../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			<!-- 头像 end -->

			<view class="line-top">
				<view class="line"></view>
			</view>

			<!-- 用户名 start -->
			<view class="item-wapper" @click="resetNickName">
				<view class="info-words">用户名</view>
				<view class="right-wapper">
					<view class="gray-fields">{{user.nickname}}</view>
					<view class="arrow-block">
						<image src="../../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			<!-- 用户名 end -->

			<!-- 生日 start -->
			<navigator url="./user-birthday">
				<view class="item-wapper" @click="resetBirthday">
					<view class="info-words">生日</view>
					<view class="right-wapper">
						<view class="gray-fields">
							{{user.birthday}}
						</view>
						<view class="arrow-block">
							<image src="../../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
						</view>
					</view>
				</view>
			</navigator>
			<!-- 生日 end -->


			<!-- 性别 start -->
			<view class="item-wapper" @click="resetSex">
				<view class="info-words">
					性别
				</view>
				<view class="right-wapper">
					<view class="gray-fields">
						<!-- <view v-if="userInfo.sex == 1">男</view>
						<view v-else-if="userInfo.sex == 0">女</view>
						<view v-else>未选择</view> -->
						{{user.sex}}
					</view>
					<view class="arrow-block">
						<image src="../../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			<!-- 性别 end -->
		</view>

		<!-- 底部清理退出 start -->
		<view class="footer-wapper">
			<view class="footer-words" @click="logout" style="margin-top: 10upx;">
				退出登录
			</view>
		</view>
		<!-- 底部清理退出 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {}
			}
		},

		onLoad() {
			this.user = this.getGlobalUser();
		},

		onShow() {
			this.user = this.getGlobalUser();
		},

		methods: {
			getGlobalUser() {
				return uni.getStorageSync(this.globalUser);
			},

			removeGlobalUser() {
				uni.clearStorageSync(this.globalUser);
			},

			// 清理本地缓存
			clearStorage() {
				uni.clearStorageSync();
				uni.showToast({
					title: '清理缓存成功',
					mask: false,
					duration: 1500
				});
				uni.switchTab({
					url: '../me/me'
				})
			},

			// 退出登录
			logout() {
				// 读取缓存用户
				const user = this.getGlobalUser();

				if (user != null) {
					const id = id;
					uni.request({
						url: this.baseUrl + '/api/edu/user/logout?id=1',
						method: 'POST',
						success: (res) => {
							if (res.data.code == 200) {
								// 清理本地缓存
								this.removeGlobalUser();

								// 跳转到个人页面
								uni.switchTab({
									url: '../my'
								})
							}
						}
					})
				} else {

				}
			},

			// 头像操作
			operate() {
				const me = this;
				uni.showActionSheet({
					itemList: ['查看用户头像', '从相册选择上传'],
					success(res) {
						console.log(res);
						const index = res.tapIndex;

						console.log(index);
						if (index == 0) { // 查看用户头像
							// this.previewFace();
							me.previewFace();
						} else if (index == 1) { // 从相册选择上传
							console.log(11)
							me.uploadFace();
						}
					}
				})
			},

			// 预览头像
			previewFace() {
				//console.log(this.user.avatarUrl)
				var faceUrls = [];
				faceUrls.push(this.user.avatarUrl);
				// debugger
				uni.previewImage({
					urls: faceUrls,
					current: faceUrls[0]
				})
			},

			// 从相册选择上传头像
			uploadFace() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						
						// uni.uploadFile();
					}
				});
			},

			// 修改昵称
			resetNickName() {
				uni.navigateTo({
					url: './user-nickname'
				})
			},

			resetSex() {
				uni.navigateTo({
					url: './user-sex'
				})
			},

			// 修改生日
			resetBirthday() {
				uni.navigateTo({
					url: './user-birthday/user-birthday'
				})
			}
		}
	}
</script>

<style>
	/* 页面铺满屏幕 */
	.page-fill {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.info-list {
		/* margin-top: 20upx; */
		padding: 0upx 30upx;
	}

	.info-words {
		color: #333333;
		font-size: 16px;
		width: 25%;
		line-height: 80upx;
		/* font-weight: bold; */
	}

	.face {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}

	.arrow-block {
		margin-left: 10upx;
		line-height: 86upx;
	}

	.arrow-ico {
		width: 30upx;
		height: 30upx;
	}

	.item-wapper {
		display: flex;
		/* margin-top: 20upx; */
		flex-direction: row;
		justify-content: flex-start;
	}

	.face-line-upbottom {
		margin-top: 20upx;
		/* margin-bottom: 20upx; */
		padding-top: 20upx;
		padding-bottom: 20upx;
	}

	.line-top {
		/* margin-top: 20upx; */
	}

	.right-wapper {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.gray-fields {
		font-size: 14px;
		color: darkgray;
		line-height: 80upx;
	}

	/* 底部操作 start */
	.footer-wapper {
		position: fixed;
		bottom: 0;

		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.footer-words {
		text-align: center;
		background-color: white;
		padding: 20upx;

		color: #333333;
		font-size: 16px;
	}

	/* 底部操作 end */
</style>
